<template>

  <div>
    <el-form ref="treeFormRef" :model="treeForm" :rules="formRules" label-width="120px" class="tree-form" size="large">
      <el-row :gutter="20">
        <!-- 第一列 -->
        <el-col :span="12">
          <el-form-item label="古树ID" prop="treeId">
            <el-input v-model="treeForm.treeId" placeholder="请输入古树ID" clearable />
          </el-form-item>

          <el-form-item label="古树中文名" prop="chineseName" required>
            <el-input v-model="treeForm.chineseName" placeholder="请输入古树中文名" clearable />
          </el-form-item>

          <el-form-item label="拉丁学名" prop="scientificName">
            <el-input v-model="treeForm.scientificName" placeholder="请输入拉丁学名" clearable />
          </el-form-item>

          <el-form-item label="科名" prop="familyName" required>
            <el-input v-model="treeForm.familyName" placeholder="请输入科名" clearable />
          </el-form-item>



          <!-- <el-col :span="12"> -->
          <el-form-item label="属名" prop="genusName" required>
            <el-input v-model="treeForm.genusName" placeholder="请输入属名" clearable />
          </el-form-item>

          <el-form-item label="上传图片" prop="image">
            <el-icon size="30px">
              <Picture />
            </el-icon>
            <div class="upload-image">
              <UploadImage ref="uploadImageRef" />
            </div>
          </el-form-item>

          <el-form-item label="树龄" prop="estimatedAge">
            <el-input-number v-model.number="treeForm.estimatedAge" :min="0" :max="10000" placeholder="请输入树龄"
              controls-position="right" />
          </el-form-item>

          <el-form-item label="地理位置">
            <el-row :gutter="10">

              <el-form-item prop="gpsLongitude">
                <el-input v-model="treeForm.gpsLongitude" placeholder="经度" clearable />
              </el-form-item>


              <el-form-item prop="gpsLatitude">
                <el-input v-model.number="treeForm.gpsLatitude" placeholder="纬度" clearable />
              </el-form-item>

            </el-row>
          </el-form-item>

          <el-form-item label="详细地址" prop="locationAddress" required>
            <el-input v-model="treeForm.locationAddress" placeholder="请输入详细地址" type="textarea" :rows="2" clearable />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item class="form-footer">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>

    </el-form>

  </div>
</template>

<script setup lang="ts">
import UploadImage from '@/views/main/tree/tree-upload/UploadImage.vue'

import { reactive, ref } from 'vue'
import type { FormRules, ElForm } from 'element-plus'
import { ElMessage } from 'element-plus'



/* export const useAncientTreeForm = () => { */

// 声明表单引用
const treeFormRef = ref<InstanceType<typeof ElForm>>()
const treeForm = reactive({
  treeId: null,
  chineseName: '',
  scientificName: '',
  familyName: '',
  genusName: '',
  estimatedAge: null,
  gpsLongitude: null,
  gpsLatitude: null,
  locationAddress: ''
})

const formRules = reactive<FormRules<typeof treeForm>>({
  chineseName: [
    { required: true, message: '古树中文名不能为空', trigger: ['blur', 'change'] }
  ],
  familyName: [
    { required: true, message: '科名不能为空', trigger: ['blur', 'change'] }
  ],
  genusName: [
    { required: true, message: '属名不能为空', trigger: ['blur', 'change'] }
  ],
  estimatedAge: [
    {
      type: 'number',
      validator: (_, value, callback) => {
        if (value === null || value === undefined) return callback()
        if (value < 0) {
          callback(new Error('树龄必须大于0'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  locationAddress: [
    { required: true, message: '详细地址不能为空', trigger: ['blur', 'change'] }
  ],
  gpsLongitude: [
    {
      type: 'number',
      validator: (_, value, callback) => {
        if (value === null) return callback()
        if (value < -180 || value > 180) {
          callback(new Error('经度范围应在-180到180之间'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  gpsLatitude: [
    {
      type: 'number',
      validator: (_, value, callback) => {
        if (value === null) return callback()
        if (value < -90 || value > 90) {
          callback(new Error('纬度范围应在-90到90之间'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})

const validateForm = async () => {
  try {
    await treeFormRef.value?.validate()
    return true
  } catch (error) {
    ElMessage.warning(' 请检查表单填写是否正确')
    console.log(error)
    return false
  }
}

const resetForm = () => {
  treeFormRef.value?.resetFields()
}

/* return {
  treeFormRef,
  formModel,
  formRules,
  validateForm,
  resetForm
} */


// 在 script setup 中添加 submitForm 方法
const uploadImageRef = ref()
const submitForm = async () => {


  const isValid = await validateForm()
  if (isValid) {
    // 先上传图片
    await uploadImageRef.value?.submitUpload()
    // 此处可以添加实际的提交逻辑，例如发送请求
    ElMessage.success('表单提交成功')
    console.log('提交的数据:', treeForm)
    // 提交后可选重置表单
    // resetForm()
  }
}




</script>

<style lang="less" scoped>
.upload-image {
  display: flex;
  align-items: center;
  /* 垂直居中 */
}

.upload-label {
  margin-right: 10px;
  /* 控制文字与上传组件之间的间距 */
  white-space: nowrap;
  /* 防止换行 */
}
</style>
